<%--
  Created by IntelliJ IDEA.
  User: 于永祥
  Date: 2022/9/24
  Time: 10:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<!DOCTYPE HTML>
<html>
<head>
    <title>短信发送</title>
    <!--引入layui的css-->
    <link rel="stylesheet" href="/static/web/js/layui/css/layui.css" rel="external nofollow" >
    <!--引入layui的js-->
    <script type="text/javascript" src="/static/web/js/layui/layui.js"></script>
    <!--引入jquery的js -->
    <script type="text/javascript" src="/static/web/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/static/web/js/jquery-3.3.1.min.js"></script>
</head>

<!--js-->

<script>
    function sendCode(){
        var memPhone = $("#memPhone").val();
        if(memPhone == '' || memPhone.length != 11){
            layer.msg("请输入正确的手机号！");
            return;
        }else{
            $.ajax({
                type: 'get',
                url: '/sendCode',
                data: {
                    memPhone : memPhone,
                },
                dataType: 'json',
                success: function(data) {
                    if(data){
                        timer();
                    }else{
                        layer.msg("获取验证码失败");
                    }
                },
                error: function(data) {
                    layer.msg('连接超时！');
                },
            });
        }
    }
    var wait = 60;
    //倒计时
    function timer() {
        if(wait == 0){
            $("#sendBtn").val("获取验证码");
            $("#sendBtn").removeAttr("disabled");
            $("#sendBtn").css("border-color","1e9fff").css("background", "#ffffff").css("cursor", "pointer");
            wait = 60;
        }else{
            $("#sendBtn").attr("disabled","true");
            $("#sendBtn").css("border-color","fbfbfb").css("background", "#ccc").css("cursor", "not-allowed");
            $("#sendBtn").val(wait + "秒后重发");
            wait--;
            setTimeout(function() {timer()}, 1000);
        }
    }
</script>
<body>
<center>
    <div id="model2" >
        <div class="layui-form-item input-item">
            <input type="text" placeholder="请输入手机号" autocomplete="off" id="memPhone" name="memPhone" class="layui-input" style="width: 10%;">
        </div>
        <div class="layui-form-item input-item">
            <input type="text" placeholder="请输入验证码" autocomplete="off" id="code" name="code" maxlength="6" class="layui-input" style="width: 10%;">
            <input type="button" class="layui-btn layui-btn-primary" value="获取验证码" id="sendBtn" style="width:10%;border-color:#1e9fff !important;" onclick="sendCode()" ></input>
        </div>
    </div>
</center>
</body>
</html>
